<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE HTML>

<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + "/" + path + "/";
%>


<html>
<head>

    <base href="<%=basePath%>">

    <link rel="stylesheet" type="text/css" href="static/h-ui/css/H-ui.min.css"/>
    <link rel="stylesheet" type="text/css" href="static/h-ui.admin/css/H-ui.admin.css"/>
    <link rel="stylesheet" type="text/css" href="lib/Hui-iconfont/1.0.8/iconfont.css"/>
    <link rel="stylesheet" type="text/css" href="static/h-ui.admin/skin/default/skin.css" id="skin"/>
    <link rel="stylesheet" type="text/css" href="static/h-ui.admin/css/style.css"/>
    <link rel="stylesheet" href="lib/zTree/v3/css/zTreeStyle/zTreeStyle.css" type="text/css">

</head>
<body>
<article class="page-container">
    <form class="form form-horizontal" method="post" action="${role != null ? 'role/update.do':'role/insert.do' }"
          id="roleForm">
        <%--修改id--%>
        <input type="hidden" name="roleId" value="${role.roleId}">
        <%--权限Id--%>
        <input id="permissionId" type="hidden" name="permissionIds" value="${role.permissionIds}">
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>名称账号</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="text" class="input-text" value="${role.rolename}" placeholder="请输入名称账号" id="rolename"
                       name="rolename">
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>角色描述</label>
            <div class="formControls col-xs-8 col-sm-9">
                <textarea name="remark" cols="" rows="" class="textarea" placeholder="说点什么"
                          dragonfly="true">${role.remark}</textarea>
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>拥有权限</label>
            <div class="formControls col-xs-8 col-sm-9">
                <%--权限表--%>
                <ul id="permissionTree" class="ztree"></ul>
            </div>
        </div>

        <div class="row cl">
            <div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3">
                <input class="btn btn-primary radius" type="submit" value="&nbsp;&nbsp;提交&nbsp;&nbsp;">
            </div>
        </div>
    </form>
</article>

<!--_footer 作为公共模版分离出去-->
<script type="text/javascript" src="lib/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="lib/layer/2.4/layer.js"></script>
<script type="text/javascript" src="static/h-ui/js/H-ui.min.js"></script>
<script type="text/javascript" src="static/h-ui.admin/js/H-ui.admin.js"></script> <!--/_footer 作为公共模版分离出去-->
<script type="text/javascript" src="lib/jquery.validation/1.14.0/jquery.validate.js"></script>
<script type="text/javascript" src="lib/jquery.validation/1.14.0/validate-methods.js"></script>
<script type="text/javascript" src="lib/jquery.validation/1.14.0/messages_zh.js"></script>
<script type="text/javascript" src="lib/zTree/v3/js/jquery.ztree.all-3.5.min.js"></script>

<%--zTree分配权限的js--%>
<script type="text/javascript">

    /*zTree的初始化对象,*/
    var setting = {
        data: {
            /*设置支持简单数据*/
            simpleData: {
                enable: true,
                idKey: "permissionId",
                pIdKey: "parentId"

            }
        },
        /*设置支持复选框*/
        check: {
            enable: true
        },
        /*开启支持异步加载数据*/
        async: {
            enable: true,
            url: "permission/getAllPermission.do",
            //对ajax返回的数据进行预处理数据
            dataFilter: ajaxDataFilter
        },
        /*异步回调函数*/
        callback: {
            /*异步加载成功回调函数*/
            onAsyncSuccess: zTreeOnAsyncSuccess
        }
    };
    /*异步加载成功回调函数*/
    function zTreeOnAsyncSuccess(event, treeId, treeNode, msg) {
        /*
        * 将zTree数据回写思路
        * 1.获取Ids
        * 2.转化成数据循环
        * 3.获取树对象,对特定ID的属性设为true
        * */
        var permissionId="${role.permissionIds}";
        var permissionIdsArr=permissionId.split(",");

        //获取树
        var treeObj = $.fn.zTree.getZTreeObj("permissionTree");

        for (var i = 0; i < permissionIdsArr.length; i++) {

            var Id=permissionIdsArr[i];
            var nodes = treeObj.getNodeByParam("permissionId", Id, null);

            console.log(nodes)

            //让其对应节点选中
            treeObj.checkNode(nodes, true, false);


        }



    };


    /*预处理过滤函数*/
    function ajaxDataFilter(treeId, parentNode, responseData) {
        if (responseData) {
            for (var i = 0; i < responseData.length; i++) {

                /*清空所有URL地址，防止跳转*/
                responseData[i].url = null;
                /*将所有目录展开*/
                responseData[i].open = true;


            }
        }
        return responseData;
    };


    /*初始化zTree*/
    $(function () {
        $.fn.zTree.init($("#permissionTree"), setting);
    });


    /*获取选中节点的数据*/
    function getCheckedData() {
        /*获取zTree树对象 ：没有#不是Jquery ID选择器 */
        var treeObj = $.fn.zTree.getZTreeObj("permissionTree");
        /*获取选中的节点*/
        var nodes = treeObj.getCheckedNodes(true);


        //用于声明数组
        var permissionIds = [];

        //循环节点
        for (var i = 0; i < nodes.length; i++) {

            var node = nodes[i];
            permissionIds.push(node.permissionId);

        }
        console.log(permissionIds);
        console.log(permissionIds.toString());
    }
</script>


<script type="text/javascript">
    /*Form进行表单验证*/
    $(function () {
        $("#roleForm").validate({

            rules: {
                rolename: {
                    required: true

                },
                remark: {

                    required: true

                }

            },
            messages: {
                //校验失败提示消息
                name: {
                    required: "名称不能为空!"
                },
                expression: {
                    required: "描述不能为空!"
                }
            },
            submitHandler: function (form) {

                /*获取zTree树对象 ：没有#不是Jquery ID选择器 */
                var treeObj = $.fn.zTree.getZTreeObj("permissionTree");
                /*获取选中的节点*/
                var nodes = treeObj.getCheckedNodes(true);

                if (nodes.length ==0) {
                    layer.msg("请分配权限在提交!");
                    /*终止程序运行*/
                    return false;
                }

                //用于声明数组
                var permissionIdsArr = [];

                //循环节点
                for (var i = 0; i < nodes.length; i++) {

                    var node = nodes[i];
                    permissionIdsArr.push(node.permissionId);

                }
                var permissionIds =permissionIdsArr.toString();

                //将权限值给到权限Id隐藏域
                $("#permissionId").val(permissionIds);
                console.log("传值成功!")

                /*
                *  校验成功
                * 回调函数
                  form:表单dom对象
                  使用ajax异步提交即可
                  Dom对象转换成Jquery对象：$(dom对象)
                  需要指定action,method，提交的是整个表单
                * */

                $(form).ajaxSubmit(function (data) {

                    layer.msg(data.msg, {icon: data.code, time: 1500}, function () {
                        if (data.code == 1) {

                            //刷新父页面的boostrap-Table表格
                            parent.refreshTable();

                            //让父页面关闭弹框
                            parent.layer.closeAll();
                        }
                    })

                });

            }

        });
    });


</script>
<!--/请在上方写此页面业务相关的脚本-->
</body>
</html>
